<template>
	<view class="content">
		<view class="l-body">
			<!-- l-madin -->
			<view class="l-main">
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl1);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							2020年全国普通高校大学生竞赛排行榜内竞赛项目名单
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill" @click="openPDF(contractUrl2);towait()"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							中国计算机学会推荐国际学术会议和期刊目录-2019
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl3);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							校历2021
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl4);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							关于开展2021年度大学生创新创业训练计划立项申报工作的通知
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl5);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							关于开展2022年度本科生科研基金项目立项申报工作的通知
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl6);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							2021年外研社演讲比赛通知
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl7);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							关于举办2021年“外研社·国才杯”英语阅读大赛校园赛的通知
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl8);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							关于举办2021年“外研社·国才杯”英语写作大赛校园赛的通知
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
				<view class="l-dl" @scrolltolower="scroll" @click="openPDF(contractUrl9);towait()">
					<view>
						<image class="l-dt" :src="img" mode="aspectFill"></image>
					</view>
					<view class="l-dd">
						<view class="l-dd-title">
							信息科学与工程学院 2022 年推荐优秀应届本科毕业生免试攻读硕士学位研究生工作实施细则
						</view>
						<view class="l-dd-footer">
							<!-- <image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							<image class="l-dd-img" lazy-load src="../../../static/logo.png" mode="aspectFill"></image>
							 -->
							 
							<text style="font-size: 30rpx;"></text>
						</view>
					</view>
				</view>
				
					<view style="text-align: center;font-size: 30rpx;color: #F1F1F1;margin-top: 15rpx;">
						已加载全部
					</view>
				
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				
				img: `/static/pdf.jpg`,
				
				contractUrl1:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/1f2a65e0-9225-4112-b2e6-b74efad87c76.pdf',
				contractUrl2:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/8d8b176f-7caf-4010-a43e-43b09e40b512.pdf',
				contractUrl3:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/de7484e9-5eab-45d5-acbf-d94a8035f28f.pdf',
				contractUrl4:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/806ba3a6-524e-4e12-b175-c33c53750ad7.pdf',
				contractUrl5:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/776fbf6a-db5a-4371-aeda-ce9640973660.pdf',
				contractUrl6:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/d1a4951b-1e9f-414a-a309-5af4f2888415.pdf',
				contractUrl7:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/72814bf5-fdb2-440a-aea8-c685534e5612.pdf',
				contractUrl8:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/555b4198-e181-4186-adc6-ea9085b9ccef.pdf',
				contractUrl9:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-77dc303a-f168-4c8b-aee5-199414dbcac2/5f7e280d-5f4d-4351-b94f-d344982b9412.pdf',
			}
		},
		methods:{
			towait(){
				uni.navigateTo({
				  url: "/pages/bookself/filePreview/filePreview",
				});
			},
			successall(e){
				console.log(e.tempFilePaths[0]);
				this.Url = e.tempFilePaths[0];
			},
			locapdf(filePath){
				uni.openDocument({
				  filePath: filePath,
				  success: function (res) {
				    console.log("打开文档成功");
				  },
				});
			},
			androidOpenPdf(url) {
			  uni.downloadFile({
			    url: url,
			    success: function (res) {
			      var filePath = res.tempFilePath;
			      uni.openDocument({
			        filePath: filePath,
			        success: function (res) {
			          console.log("打开文档成功");
			        },
			      });
			    },
			  });
			},
			openPDF(contractUrl) {
			  switch (uni.getSystemInfoSync().platform) {
			    case "android":
			      console.log("安卓");
			      // 这里直接调用原生的方法，我们上面定义的
			      this.androidOpenPdf(contractUrl);
			      break;
			    case "ios":
			      console.log("IOS");
			      //这里跳转web-view页面
			      uni.navigateTo({
			        url: "/pages/bookself/filePreview/filePreview?contractUrl=" + contractUrl,
			      });
			      break;
			    default:
			      this.androidOpenPdf(contractUrl);
			      break;
			  }
			}
		}
	}
</script>

<style>
	page,
		uni-page{
			background-color: var(--c-bg-3);
			color: var(--c-txt-1);
			font-size: var(--f-size-2);
			
			/* font-size */
			--f-size-1:24rpx;
			--f-size-2:28rpx;
			--f-size-3:32rpx;
			--f-size-4:36rpx;
			--f-size-5:40rpx;
			--f-size-6:44rpx;
			
			/* color | background */
			--c-txt-1:#FFFFFF;
			--c-txt-2:#95A1A6;
			--c-txt-3:#cdced0;
			
			--c-bg-1:#000000;
			--c-bg-2:#7E7F94;
			--c-bg-3:#0b0c21;
			
			/*--c-bg-2:#7E7F94;
			
			/* padding-left | right */
			--pad-lr:32rpx;
			
			/* navbar-height */
			--h-head:96rpx;
			
			/* input placeholder text color */
			--c-input-holder:#696a7f;
			
			
		}
	/* l-head */
	page{background-color: #ffffff;}
	
	.l-head {
		margin-top: 15rpx;
	}

	.l-nav-bookrack {
		font-size: 30rpx;
	}


	/* l-main */

	.l-main {
		padding-bottom: 32rpx;
	}

	.l-h3 {
		display: flex;
		flex-direction: row; 
		justify-content: center;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
		color: #000000;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: #000000;
		font: var(--f-size-3) normal;
	}

	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-view-footer {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}
</style>
